<template>
  <div class="page-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="16" :style="{ marginBottom: '24px' }">
        <tendency></tendency>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <a-card title="最近一分钟每台交易量占比" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" :body-style="{padding: '10px'}" style="width:100%">
          <graph-chart id="tradingVolume" :opiton="optionTrade" style="width:100%; height:250px"></graph-chart>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
        <div class="table-list">
          <a-card title="交易列表详情" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
            <a-spin :spinning="loading">
              <a-table
                row-key="index"
                size="small"
                :columns="transListColumns"
                :dataSource="handleCountData"
                :pagination="{ pageSize: 4 }"
              >
                <span slot="host" slot-scope="text">
                  <ellipsis :length="15" tooltip>{{ text }}</ellipsis>
                </span>
                <span slot="directory" slot-scope="text">
                  <ellipsis :length="20" tooltip>{{ text }}</ellipsis>
                </span>
              </a-table>
            </a-spin>
          </a-card>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
        <trade-count></trade-count>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
        <use-time></use-time>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// import moment from 'moment'
import axios from 'axios'
import { STable, Ellipsis } from '@/components'
import graphChart from './modules/transact/graphChart'
import tendency from './modules/transact/tendency'
import tradeCount from './modules/transact/tradeCount'
import useTime from './modules/transact/useTime'
// import { getTradeSearch, getTradeHandleCount } from '@/api/transaction'
// import Attribute from './componentLists/Attribute'
// import { mixinDevice } from '@/utils/mixin'
export default {
  name: 'Transaction',
  // mixins: [mixinDevice],
  components: {
    STable,
    Ellipsis,
    graphChart,
    tendency,
    tradeCount,
    useTime
  },
  data () {
    return {
      loading: true,
      tradloading: true,
      transloading: true,
      tradebuckets: [], // 最近一分钟每台交易量占比
      // 搜索用户数
      handleCountData: [], // 交易详情数据
      transListColumns: [
        {
          dataIndex: 'host',
          title: 'Host',
          scopedSlots: { customRender: 'host' }
        },
        {
          dataIndex: 'directory',
          title: '工作目录',
          scopedSlots: { customRender: 'directory' }
        },
        {
          dataIndex: 'handleCount',
          title: '句饼数',
          align: 'center',
          sorter: (a, b) => a.handleCount - b.handleCount,
          scopedSlots: { customRender: 'handleCount' }
        }
      ],
      optionTrade: {
        backgroundColor: '#fff',
        tooltip: {},
        animationDurationUpdate: function (idx) {
            // 越往后的数据延迟越大
            return idx * 100
        },
        animationEasingUpdate: 'bounceIn',
        color: ['#fff', '#fff', '#fff'],
        series: [{
            type: 'graph',
            layout: 'force',
            force: {
                repulsion: 50,
                edgeLength: 5
            },
            roam: true,
            label: {
                normal: {
                    show: true
                }
            },
            data: []
        }]
      }
    }
  },
  created () {
    this.getLastMinuteTrend()
    this.getHandleCount()
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
    * 最近一分钟每台交易量占比
    **/
    getLastMinuteTrend () {
      axios.get('../data/tradecountbuckets.json').then((res) => { 
        const tradeBuckets = []
        // const colorList = ['red', 'orange', 'green', 'blue', 'purple']
        res.data.data.tradebuckets.forEach(function (item, index) {
          tradeBuckets.push({
          'symbolSize': item.transCount >= 1000 ? 55 : item.transCount >= 500 && item.transCount < 1000 ? '50' : item.transCount >= 100 && item.transCount < 500 ? 45 : item.transCount >= 50 && item.transCount < 100 ? 40 : 30,
          'value': item.transCount,
          'name': item.name,
          'id': item.id,
          'draggable': true,
          'label': {
            show: item.transCount > 1000
          },
          'itemStyle': {
              'normal': {
                  // 'borderColor': 'rgb(27, 94, 93)',
                  'borderWidth': 4,
                  // 'color': item.doc_count > 2000 ? '#4688f1' : '#ecac6c'
                  'color': item.transCount >= 1000 ? '#344b5b' : item.transCount >= 500 && item.transCount < 1000 ? '#4688f1' : item.transCount >= 100 && item.transCount < 500 ? '#27a7e5' : item.transCount >= 50 && item.transCount < 100 ? '#c9852f' : '#f9624c'
              }
          } })
        })
        this.optionTrade.series[0].data = tradeBuckets  
      })
    },
    /***
     * 交易列表详情
     */
    getHandleCount () {
      for (let i = 0; i < 50; i += 1) {
        this.handleCountData.push({
          host: `10.11.21.${i}`,
          directory: '/home/bdagent/filebeckut',
          handleCount: Math.floor(Math.random() * 100)        
        })
        this.loading = false
      }
    },
    test () {
      const we1 = [{ '时间': '11:22:20', '7日前交易量': 3000 }, { '时间': '11:23:20', '7日前交易量': 1500 }]
      const we2 = [{ '时间': '11:22:20', '3小时前业务量': 1000 }, { '时间': '11:23:20', '3小时前业务量': 2500 }]
      this.mergeArrows(we1, we2)
    }
  }
}
</script>

<style lang="less" scoped>
  .data-empty {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .7);
    color: #888;
    font-size: 14px;
  }
  .table-list{
    .ant-card{
      /deep/ .ant-card-body{
        padding: 0 10px;
        .ant-table-small{
          border: none;
        }
      }
    }
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
